<template>
  <el-config-provider :locale="locale">
    <div class="page-container">
      <!-- 标题 -->
      <div class="title">
        <div class="inner">大数据平台</div>
      </div>

      <controllButtons></controllButtons>

      <!-- 时间 -->
      <div data-desc="时间选择" class="time-checkbox">
        <!-- 采用绝对定位设置的 -->
        <arrowDown class="arrow-down-icon" :class="visible ?  'open-icon': '' "></arrowDown>
        <el-date-picker
          popper-class="time-poper-panel"
          v-model="currentTime"
          type="date"
          format="YYYY年MM月DD日"
          value-format="YYYY-MM-DD"
          :clearable="false"
          :editable="false"
          :prefix-icon="customPrefixIcon"
          :disabled-date="disabledDate"
          @visible-change="onVisibleChange"
        />
      </div>

      <div class="page-content" data-desc="主体内容">
        <div class="column-item column-item-1">
          <!-- 企业概况 -->
          <componentProfile></componentProfile>

          <!-- 访客记录 -->
          <visitorsRecord></visitorsRecord>
        </div>

        <div class="column-item column-item-2">
          <!-- 当日实到人数 -->
          <actualNumberOfAttendees></actualNumberOfAttendees>

          <!-- 今日场内数据看板 -->
          <todayDataBoard></todayDataBoard>
        </div>

        <div class="column-item column-item-3">
          <!-- 超时 -->
          <timeoutPanel></timeoutPanel>
          <!-- 签到记录 -->
          <attendanceRecord></attendanceRecord>
        </div>
      </div>

      <!-- 底部背景 -->
      <div>
        <img class="bottom-pic" src="@/assets/images/01/img_bottom_bg.png" />
      </div>
    </div>
  </el-config-provider>
</template>

<script setup name="demo-01">
import { onMounted, onUnmounted, ref, shallowRef ,h} from 'vue'
import autofit from 'autofit.js'
import dayjs from 'dayjs'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

import controllButtons from './component/controll-buttons/index.vue'

// 企业概况
import componentProfile from './component/company-profile/index.vue'
// 访客记录
import visitorsRecord from './component/visitors-record/index.vue'
// 当日实到人数
import actualNumberOfAttendees from './component/actual-number-of-attendees/index.vue'
// 今日场内数据看板
import todayDataBoard from './component/today-data-board/index.vue'
// 超时
import timeoutPanel from './component/timeout-panel/index.vue'
// 最近签到记录
import attendanceRecord from './component/attendance-record/index.vue'
import arrowDown from './svg/arrow-down.vue'

const currentTime = ref()

const locale = ref(zhCn)

const visible = ref(null)

currentTime.value = dayjs().format('YYYY-MM-DD HH:mm:ss')

const customPrefixIcon = shallowRef({
  render() {
    return h('span', '')
  }
})

const onVisibleChange = (state) => {
  visible.value = state
}

/**
 * 禁用日期
 */
const disabledDate = (date) => {
  return date > new Date()
}

const init = () => {
  autofit.init({
    dh: 1080,
    dw: 1920,
    el: '#app',
    resize: true
  })
}

onMounted(() => {
  init()
})

onUnmounted(() => {
  autofit.off('#app')
})
</script>

<style lang="scss" scoped>
.page-container {
  position: relative;
  height: 100%;
  background-color: #111e25;

  .title {
    display: flex;
    justify-content: center;
    height: 3.125vw;
    line-height: 3.125vw;

    .inner {
      width: fit-content;
      text-align: center;
      color: #fff;
      font-family:
        Alimama ShuHeiTi,
        Alimama ShuHeiTi;
      font-weight: 700;
      font-size: 2.1875vw;
      letter-spacing: 33px;
      text-shadow: 0px 0px 8px rgba(102, 255, 255, 0.46);
      background: linear-gradient(90deg, #ffffff 0%, #98d4fa 100%);

      -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
      background-clip: text;
      -webkit-text-fill-color: transparent; /*给文字设置成透明*/
    }
  }
}

.page-content {
  width: 100%;
  display: flex;
  // justify-content: space-between;
  // column-gap: 24 /1920 * 100vw;
  column-gap: 1.25vw;

  margin-top: 1.458333vw;

  color: #fff;
  box-sizing: border-box;
  padding: 0 24px 24px 24px;

  .column-item-1 {
    flex: 1;
    flex-shrink: 0;
    // 456px / 1920
    // width: 23.75%;
    // width: 456px;
  }

  .column-item-2 {
    flex: 2;
    flex-shrink: 0;
    // width: 47.5%;
    // width: 912px;
  }
  .column-item-3 {
    flex: 1;
    flex-shrink: 0;
    // width: 23.75%;
    // width: 456px;
  }
}

.bottom-pic {
  position: absolute;
  left: 0;
  // 72px
  bottom: -3.75vw;
  width: 100%;
  height: 5.416667vw;
}

.time-checkbox {
  position: relative;
  color: #fff;
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 400;
  font-size: 0.833333vw;
  line-height: 0.833333vw;
  text-shadow: 0px 0px 8px rgba(102, 255, 255, 0.46);
  text-align: left;
  font-style: normal;
  text-transform: none;
  padding-left: 1.25vw;
  padding-bottom: 1.302083vw;

  &::before {
    position: absolute;
    left: 0;
    bottom: 0;
    content: ' ';
    display: block;
    width: 12.5vw;
    height: 0.104167vw;

    background: linear-gradient(
      180deg,
      rgba(0, 123, 255, 0) 10%,
      rgba(56, 185, 255, 0.6) 100%
    );
    box-shadow: inset 0px -5px 6px 0px rgba(30, 220, 220, 0.1);
  }

  &::after {
    position: absolute;
    right: 0;
    bottom: 0;
    content: ' ';
    display: block;
    width: 12.5vw;
    height: 0.104167vw;
    background: linear-gradient(
      180deg,
      rgba(0, 123, 255, 0) 10%,
      rgba(56, 185, 255, 0.6) 100%
    );
    box-shadow: inset 0px -5px 6px 0px rgba(30, 220, 220, 0.1);
  }

  // 下拉箭头
  .arrow-down-icon {
    color: #fff;
    fill: #fff;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 6px;
    left: 156px;
    stroke: #fff;
    stroke-width: 60px;
    transition: 0.5s ease;
  }
}

.open-icon {
  transform: rotate(180deg);
  transform-origin: 50% 50%;
}

// 改造日期显示样式
:deep(.time-checkbox) {
  .el-input__wrapper {
    background: transparent !important;
    box-shadow: none;
  }

  .el-input__prefix {
    display: none;
  }
  .el-input__inner {
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    text-shadow: 0px 0px 8px rgba(102, 255, 255, 0.46);
    text-align: left;
    font-style: normal;
    text-transform: none;
    background: linear-gradient(90deg, #ffffff 0%, #98d4fa 100%);

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
</style>
<style lang="scss">
// 处理日期展开选项卡颜色
.time-poper-panel {
  background: transparent !important;

  .el-date-picker {
    // background: transparent;
    background: rgba(0, 0, 0, 1);
  }

  .el-picker-panel {
    color: #fff;

    .el-date-table th {
      color: #fff;
    }
  }

  .el-date-picker__header > * {
    color: #fff;
  }

  .el-picker-panel__icon-btn {
    color: #fff;
  }

  .el-year-table span {
    color: #fff;
  }

  .el-date-table td.disabled .el-date-table-cell {
    background: #eee;
  }
}
</style>
